<template lang='pug'>
.detail
  .header
    p.iconfont.icon-fanhui(@click="$router.go(-1)")
    p.title 订单详情
    p.seek.iconfont.icon-sousuo
  .ding-info
    p 订单编号：5210914536203512
    p 订单状态：未关闭
  .list(v-if="list.length")
    .left
        img(:src="list[0].cover")
    .info
        p {{list[0].name}}
    .right
        p ￥{{list[0].price}}
        span ×{{list[0].num}}
  .ding-info.two(v-if="list.length")
    p 商品价格：{{list[0].price}}.00 元
    p 派送费用 0 元
    p 实付金额：{{list[0].price}}.00 元
  .ding-info.two.hei(v-if="dz")
    p 下单日期：2021/09/14  19:01
    p 收货地址：{{dz.buyer_address}}
    p 收货人名：{{dz.buyer_name}} {{dz.buyer_phone | phoneFilter}}
    p 收获事件：不限送货时间
    p 发票类型：电子普通发票
    p 发票抬头：个人
  .hlr
    p 如果您想查看电子发票或修改订单信息，请下载小米商城App
    button 下载小米商城App
  .butAll
    button 联系客服
    button 删除订单
</template>
<script>
export default {
  name: "vueName",
  data() {
    return {
      msg: "Welcome to your vueName",
      list: [],
      dz: null,
      obj: {},
    };
  },
  filters:{
    phoneFilter(phone){
      if(phone){
        let c = phone.split('').splice(0,3).join('');
        let r = phone.split('').splice(7,11).join('')
        return c+'****'+r
      }
    }
  },
  methods: {
    getInfo() {
      this.$http
        .get("http://192.168.43.168:8082/user/allsearch")
        .then((val) => {
          this.list = val.data
            .filter((item) => item.id == this.obj.id)
            .map((item) => ({ ...item, num: this.obj.num }));
          console.log(this.list);
        });
    },
    getdz() {
      this.$http
        .get("http://192.168.43.168:8082/user/sele-addren")
        .then((val) => {
          this.dz = val.data.find((item) => item.address_id == this.obj.dz);
          console.log(this.dz);
        });
    },
  },
  mounted() {
    this.$store.commit('setIsShow',false)
    this.obj = this.$route.query;
    console.log(this.obj)
    this.getInfo();
    this.getdz();
  },
};
</script>
 
<style scoped lang="sass">
.detail
    width: 100%
    height: 100vh
    background: #f0f0f0
.list
    height: 1rem
    background: #fff
    padding: .1rem
    margin-top: .3rem
    display: flex
    justify-content: space-between
    padding: .3rem
    align-items: center
    border-top: 1px solid #ccc
    font-size: .15rem
    span 
        color: #ccc
    img
        width: .7rem
        height: .7rem
.header
    width: 100%
    height: .5rem
    display: flex
    justify-content: space-between
    background: #f2f2f2
    text-align: center
    line-height: .5rem
    font-size: .15rem
    padding: 0 .1rem
    color: #000
    position: fixed
    top: 0
    z-index: 9
.ding-info
    margin-top: .5rem
    height: .7rem
    background: #fff
    padding: .1rem
    box-sizing: border-box
    font-size: .14rem
    display: flex
    flex-direction: column
    justify-content: center
.two
    margin-top: .2rem
    padding: .3rem
.hei
    height: 1.5rem
.hlr
    height: 1rem
    display: flex
    font-size: .14rem
    // justify-content: center
    flex-direction: column
    align-items: center
    padding: .3rem
    text-align: center
    button 
        padding: .05rem .1rem
        background: #fff
        font-size: .14rem
.butAll
    width: 100%
    position: fixed
    height: .5rem
    background: #fff
    display: flex
    justify-content: space-between
    align-items: center
    padding: 0 .2rem
    button 
        border: 0.5px solid #ccc
        padding: .05rem .1rem
        background: #fff
        font-size: .14rem
</style>